Unidad 4.1 - CSS I

CSS es el lenguaje encargado de dar estilo, diseño y apariencia visual a una página web. Con CSS podemos modificar colores, tamaños, tipografías, márgenes, animaciones y disposición de elementos. Esta unidad cubre las bases fundamentales del lenguaje, la separación entre estructura y diseño y las reglas de cascada.

4.1 Introducción a CSS

CSS Diseño web Estilos

CSS significa Cascading Style Sheets (Hojas de estilo en cascada). Su función principal es controlar la apariencia visual de los documentos HTML.

HTML define la estructura del contenido mientras CSS controla el diseño: colores, márgenes, tipografías, fondos, posiciones y efectos visuales.

Ventajas de CSS

  • Separación entre contenido y diseño.
  • Facilidad para mantener proyectos grandes.
  • Diseños reutilizables.
  • Webs responsive y adaptables.
  • Mejor rendimiento y limpieza del código.

Sintaxis básica

selector{ propiedad: valor; }

Ejemplo real

p{ color: red; font-size: 20px; background-color: black; }

En este ejemplo todos los párrafos tendrán letras rojas, tamaño de 20 píxeles y fondo negro.

CSS funciona mediante reglas aplicadas a elementos HTML.
Nunca mezclar demasiado estilo directamente dentro de HTML.

Mini-test

1. ¿Qué significa CSS?

4.2 Etiqueta style

style inline

La etiqueta style permite aplicar CSS directamente dentro del documento HTML.

CSS inline

<p style="color:blue;"> Hola mundo </p>

El estilo se aplica directamente sobre la etiqueta HTML.

Ventajas

  • Rápido para pruebas.
  • Útil para depuración.
  • Modificaciones inmediatas.

Desventajas

  • Mezcla contenido y diseño.
  • Difícil mantenimiento.
  • No reutilizable.
  • Rompe buenas prácticas.

Ejemplo múltiple

<h1 style="color:red;">Título</h1> <div style="background:black;color:white;padding:20px;"> Contenido </div>
El estilo inline tiene máxima prioridad sobre otras reglas CSS.

Mini-test

1. ¿Dónde se escribe CSS inline?

4.3 CSS en la Cabecera HTML

head style

Otra forma de aplicar estilos consiste en usar la etiqueta <style> dentro del elemento <head>.

<head> <style> body{ background:black; color:white; } h1{ color:red; } </style> </head>

Ventajas

  • Centraliza estilos dentro del documento.
  • Más limpio que inline.
  • Ideal para páginas pequeñas.

Desventajas

  • Sigue mezclando estructura y estilo.
  • No reutilizable entre páginas.
La mejor práctica sigue siendo usar archivos externos.

Mini-test

1. ¿Dónde se coloca la etiqueta style?

4.4 Fichero Externo CSS

link .css

La mejor forma de trabajar CSS es mediante archivos externos.

Conectar CSS

<link rel="stylesheet" href="estilos.css" >

Archivo estilos.css

body{ background:#111; color:white; } p{ color:orange; }

Ventajas

  • Separación total entre HTML y CSS.
  • Reutilizable.
  • Más ordenado.
  • Fácil mantenimiento.
  • Mejor rendimiento.
Los archivos CSS usan extensión .css

Mini-test

1. ¿Qué etiqueta conecta un CSS externo?

4.5 Hojas de Estilo en Cascada

Cascade Prioridad

CSS utiliza un sistema de cascada para decidir qué estilos se aplican.

Funcionamiento

Cuando varias reglas afectan al mismo elemento, CSS decide cuál tiene prioridad.

p{ color:blue; } p{ color:red; }

El color final será rojo porque la última regla prevalece.

Conceptos importantes

  • Herencia.
  • Especificidad.
  • Prioridad.
  • Cascada.

Herencia

body{ color:white; }

Los elementos internos heredarán el color blanco.

La cascada permite combinar múltiples reglas CSS.

Mini-test

1. ¿Qué regla prevalece normalmente?

4.6 Selectores CSS

Selectores

Los selectores permiten elegir qué elementos HTML recibirán estilos.

Selector por etiqueta

p{ color:orange; }

Selector universal

*{ margin:0; padding:0; }

Selectores múltiples

h1,h2,h3{ color:red; }

Pseudoclases

a:hover{ color:yellow; }

Selectores descendientes

div p{ color:green; }
Los selectores son la base de todo CSS moderno.

Mini-test

1. ¿Qué selector selecciona todos los elementos?

4.7 Selección por ID

id #

Los identificadores permiten aplicar estilos únicos a un elemento.

Sintaxis

#especial{ color:white; background:red; }

HTML asociado

<p id="especial"> Texto especial </p>

Características

  • Un id debe ser único.
  • Se representa con #.
  • Tiene alta prioridad.
Nunca repetir el mismo id en múltiples elementos.

Mini-test

1. ¿Qué símbolo representa un id?

4.8 Selección por grupo o clase

class .

Las clases permiten reutilizar estilos en múltiples elementos.

CSS

.destacado{ background:black; color:orange; }

HTML

<p class="destacado"> Hola </p> <h2 class="destacado"> Título </h2>

Ventajas

  • Reutilización.
  • Diseño modular.
  • Mayor organización.
  • Ideal para componentes.

Diferencias ID vs CLASS

ID CLASS
Único Reutilizable
# .
Alta prioridad Prioridad media

Mini-test

1. ¿Qué símbolo representa una clase?

4.9 Reglas de Aplicación de Estilo

Prioridad Herencia

CSS sigue reglas específicas para decidir qué estilos aplicar.

1. El último prevalece

p{ color:blue; } p{ color:red; }

Resultado final: rojo.

2. Inline tiene máxima prioridad

<p style="color:green;"> Texto </p>

3. Herencia

body{ color:white; }

4. Prioridad de selectores

Selector Prioridad
Inline Muy alta
ID Alta
Clase Media
Etiqueta Baja

5. Pseudoclases

a:hover{ color:red; }

6. Selector de atributo

img[src]{ border:2px solid red; }
Comprender la cascada es fundamental para dominar CSS.

Mini-test

1. ¿Qué tiene más prioridad?

Unidad 4.1 completada · CSS I 🚀